<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>special</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="stylesheet" href="./css/cssreset-min.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/special.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
     <style>
    .swiper-container {
        width: 100%;
        /*height: 200px;*/
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        /*padding:20px;*/
        box-sizing:border-box;
        /*background: #fff;*/

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;
    
    }

    .swiper-slide>img{
      display: block;
      width:100%;
      text-align: center;
      width: 100%!important;
      position:absolute;
      left:0;
      top:0;
    }
    .swiper-button-next, .swiper-button-prev{
        height:16px;
        margin-top:-8px;
    }
    

    </style>

</head>
<body>
     <nav>
        <ul>
            <li><a href="./index.html"><span></span></a></li>
            <li>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <div></div></li>
            <li><span></span><div></div></li>
            <li><a href="./search.html">查找影院</a><div></div></li>
            <li><a href="./more.html">IMAX电影</a><div></div></li>
            <li><a href="./special.html">IMAX特点</a><div></div></li>
            <div class="header_hide">
                <p>语言</p>
                <p>关于IMAX</p>
                <p>联系我们</p>
                <p>工作机会</p>
                <p>
                    <img src="images/guWeibo1.png" alt="">
                    <img src="images/guweixin1.png" alt="">
                    <img src="images/guYouku2.png" alt="">
                </p>
            </div>
        </ul>
        <ul>
            <li>
                <a href="./special.html">IMAX特点</a>
            </li>
            <li>
                <a href="./more.html">IMAX电影</a>
            </li>
            <li>
                <a href="./search.html">查找影院</a>
            </li>

        </ul>
    </nav>
    <section>
        <div class="main_background">
            <div class="main_background_pos"></div>
             
            <div class="main_background_info">
                <span><img src="images/logo-home.png" alt=""></span>
                <span>的特点</span>
                <p>更大的银幕</p>
                <p>仅仅是个开始</p>
            </div>
        </div>
        <div class="main_background">
            <div class="main_background_pos"></div>
             
            <div class="main_background_info">
                <span><img src="images/logo-home.png" alt=""></span>
                <span>音效</span>
                <p>完美的音效</p>
                <p>震撼心灵的音频</p>
            </div>
        </div>
        <div class="main_background">
            <div class="main_background_pos"></div>
             
            <div class="main_background_info">
                <span><img src="images/logo-home.png" alt=""></span>
                <span>的特点</span>
                <p>更大的银幕</p>
                <p>仅仅是个开始</p>
            </div>
        </div>
        <div class="main_background">
            <div class="main_background_pos"></div>
             
            <div class="main_background_info">
                <span><img src="images/logo-home.png" alt=""></span>
                <span>音效</span>
                <p>完美的音效</p>
                <p>震撼心灵的音频</p>
            </div>
        </div>
        <div class="main_background">
            <div class="main_background_pos"></div>
             
            <div class="main_background_info">
                <span><img src="images/logo-home.png" alt=""></span>
                <span>的特点</span>
                <p>更大的银幕</p>
                <p>仅仅是个开始</p>
            </div>
        </div>
        <div class="main_title">
            <span><img src="images/logo-home.png" alt=""></span>
            <span>技术合作伙伴</span>
        </div>
        <span class="main_info">
             我们的创新知识产权构建在世界高水准的基础上，所拥有的技术是我们公司内部构想创造出来的。Audyssey与Barco作为两个世界级的技术合作伙伴与我们共同合作呈现出了更佳的IMAX体验。
        </span>
        <div class="main_tech">
            <a href="javascript:;">
                <img src="images/tech_01.png" alt="">
            </a>
             <a href="javascript:;">
                <img src="images/tech_02.png" alt="">
            </a>
        </div>
        <div class="main_title">
            <span><img src="images/logo-home.png" alt=""></span>
            <span>合作伙伴</span>
        </div>
         <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/parner1.png" alt="">
                    <img src="images/parner2.png" alt="">
                </div>
       
                <div class="swiper-slide">
                    <img src="images/parner3.png" alt="">
                    <img src="images/parner4.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner5.png" alt="">
                    <img src="images/parner6.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner7.png" alt="">
                    <img src="images/parner8.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner9.png" alt="">
                    <img src="images/parner10.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner11.png" alt="">
                    <img src="images/parner12.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner13.png" alt="">
                    <img src="images/parner14.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner15.png" alt="">
                    <img src="images/parner16.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner17.png" alt="">
                    <img src="images/parner18.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/parner19.png" alt="">
                    <img src="images/parner20.png" alt="">
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>


        <!-- Initialize Swiper -->
        <script>

        var swiper=null;;
        
        function parnerInit(){
            swiper = new Swiper('.swiper-container', {
            prevButton:'.swiper-button-prev',
            nextButton:'.swiper-button-next',
            slidesPerView: 5,
            spaceBetween: 50,
            breakpoints: {
            768: {
                slidesPerView: 4,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            480: {
                slidesPerView: 2,
                spaceBetween: 10
            }
        }
            
            });
            var h=$('.swiper-slide img:first').height();
            $('.swiper-slide').height(2*h+20);
            $('.swiper-slide').each(function(){
                $(this).find('img').eq(1).css({
                'top':h+20
                });
            });
        }
        parnerInit();
        $(window).resize(parnerInit);
        </script>
        <div class="main_title">
            <span><img src="images/logo-home.png" alt=""></span>
            <span>观影体验</span>
        </div>
        <div class="main_info_bottom">
        <p>
            一次难忘的观影体验
        </p>
        <p>
            体验IMAX的最佳方式就是在IMAX影院观看我们的电影。
        </p>
        <p>
            这将为您带来更卓越震撼的观影体验。
        </p>
        </div>
        
    </section>
    <section class="main">
    <ul>
            <li>
            <img src="images/more1.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">但丁密码</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more2.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">奇异博士</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more3.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">神奇动物在哪里</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more4.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">侠盗一号：星球大战外传</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more5.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">长城</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more6.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">美女与野兽</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more7.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">逗鸟外传：萌宝满天飞</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more8.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">我的战争</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more9.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">冰川时代5：星际碰撞</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more10.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">谍影重重5</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more11.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">火海凌云</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more12.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">盗墓笔记</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>

    </ul>
    <div class="main_bottom">
                <button>更 多 电 影</button>
    </div>
    </section>

    <script src="js/list.js"></script>

    <footer>
            <div class="footer_icon">
                <div>
                    <a href="javascript:;"><img src="images/guWibo2.png" alt=""></a>
                    <a href="javascript:;"><img src="images/guWixin2.png" alt=""></a>
                    <a href="javascript:;"><img src="images/guYouku.png" alt=""></a>
                </div>
            </div>
            <p>IMAX®和The IMAX Experience®是IMAX公司的注册商标</p>
            <p>
                <a href="javascript:;">使&nbsp;用&nbsp;条&nbsp;款</a>
                <a href="javascript:;">隐&nbsp;私&nbsp;政&nbsp;策</a>
            </p>
            <p>
                <span>
                <img src="images/new-china-license.png" alt="">
                <a href="javascript:;">沪ICP备11045714号</a>
                </span>
                <span>
                <img src="images/ghs.png" alt="">
                <a href="javascript:;">沪公网安备 31010102002067号</a>
                </span>
            </p>

    </footer>
    <script src="js/init.js"></script>
</body>
</html>